@extends('admin.layout.base')
@section('styles')
@endsection
@section('scripts')
    <script type="text/javascript" src="{{ asset('/js/echarts.min.js') }}"></script>
    <script type="text/javascript" >

        option = {
            title: {
                text: '客户量统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['用户总数','供应商数'],
                top:"6%",//与上方的距离 可百分比% 可像素px
                left: 'right',
                orient: 'vertical',
            },
            grid: {
                right: '15%',
                left: '4%',

                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'用户总数',
                    type:'line',
                    stack: '总量',
                    data:[200, 320, 510, 634, 790, 1010, 1210,1301, 1434,1590, 1830, 2110]
                },

                {
                    name:'供应商数',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                }
            ]
        };

        option1 = {
                title : {
                    text: '浏览量统计',
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data: ['一级分类','二级分类','导航栏','页面']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                },
                yAxis: {
                    type: 'value'
                },
                series : [
                    {
                        name:'一级分类',
                        type:'line',
                        stack: '总量',
                        data:[200, 320, 510, 634, 790, 1010, 1210,1301, 1434,1590, 1830, 2110]
                    },

                    {
                        name:'二级分类',
                        type:'line',
                        stack: '总量',
                        data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                    },
                    {
                        name:'导航栏',
                        type:'line',
                        stack: '总量',
                        data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
                    },
                    {
                        name:'页面',
                        type:'line',
                        stack: '总量',
                        data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                    },
                ]
        };

        option2 = {
            title : {
                text: '平台获客渠道数据统计',
                // subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['PC端','手机端']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'PC端',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'手机端',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };


        option3 = {
            title : {
                text: '商机来电统计',
                // subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            legend: {

                data:['浏览量','来电量','来电成交量','来电转化率']
            },
            series: [
                {
                    name:'浏览量',
                    type:'line',
                    stack: '总量',
                    data:[200, 320, 510, 634, 790, 1010, 1210,1301, 1434,1590, 1830, 2110]
                },
                {
                    name:'来电量',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'来电成交量',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
                },
                {
                    name:'来电转化率',
                    type:'line',
                    stack: '总量',
                    data:[22, 18, 19, 23, 29, 33, 31, 18, 19, 23, 29, 33]
                },
            ]
        };

        option4 = {
            title : {
                text: '投标权益统计',
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            legend: {
                data: ['需求总量','投标成交次数','投标转化率']
            },
            series : [
                {
                    name:'需求总量',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'投标成交次数',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
                },
                {
                    name:'投标转化率',
                    type:'line',
                    stack: '总量',
                    data:[22, 18, 19, 23, 29, 33, 31, 18, 19, 23, 29, 33]
                },
            ]
        };

        option5 = {
            title: {
                text: '订单介绍统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['订单介绍总量','订单介绍成交次数','订单介绍转化率'],
                top:"6%",//与上方的距离 可百分比% 可像素px
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'订单介绍总量',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
                },
                {
                    name:'订单介绍成交次数',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
                },
                {
                    name:'订单介绍转化率',
                    type:'line',
                    stack: '总量',
                    data:[15, 23, 20, 15, 19, 33, 41, 33, 31, 20, 14, 19]
                },

            ]
        };

        option6 = {
            title: {
                text: '总交易额统计图'
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data:['中标合同金额','活动交易金额','商品交易金额']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: {
                type: 'value',
                name: '金额',
                axisLabel: {
                    formatter: '{value},00 元'
                }
            },
            series: [
                {
                    name:'中标合同金额',
                    type:'line',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name:'活动交易金额',
                    type:'line',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name:'商品交易金额',
                    type:'line',
                    data:[1.6, 2.9, 5.0, 16.4, 28.7, 30.7, 75.6, 82.2, 38.7, 28.8, 16.0, 4.3]
                },
            ]
        };


        option7 = {
            title: {
                text: '总收益统计'
            },
            tooltip: {
                trigger: 'axis',
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data:['信息费收益','服务费收益','活动收益','商品收益']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: {
                type: 'value',
                name: '金额',
                axisLabel: {
                    formatter: '{value} ,00 元'
                }
            },
            series: [
                {
                    name:'信息费收益',
                    type:'line',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name:'服务费收益',
                    type:'line',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name:'活动收益',
                    type:'line',
                    data:[2.4, 4.9, 17.0, 23.2, 35.6, 46.7, 35.6, 62.2, 42.6, 30.0, 16.4, 13.3]
                },
                {
                    name:'商品收益',
                    type:'line',
                    data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };

        option8 = {
            title: {
                text: '信息费概况统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['充值','来电消耗','投标消耗','余额'],
                top:"6%",//与上方的距离 可百分比% 可像素px
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value',
                name: '金额',
                axisLabel: {
                    formatter: '{value} ,00 元'
                }
            },
            series: [
                {
                    name:'充值',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
                },
                {
                    name:'来电消耗',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
                },
                {
                    name:'投标消耗',
                    type:'line',
                    stack: '总量',
                    data:[15, 23, 20, 15, 19, 33, 41, 33, 31, 20, 14, 19]
                },
                {
                    name:'余额',
                    type:'line',
                    stack: '总量',
                    data:[20, 82, 91, 34, 90, 30, 10, 20, 54, 90, 30, 10]
                },
            ]
        };

        option9 = {
            title: {
                text: ' 服务费概况'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['应付中标费用','已付中标费用','未付中标费用'],
                top:"6%",//与上方的距离 可百分比% 可像素px
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value',
                name: '金额',
                axisLabel: {
                    formatter: '{value} ,00 元'
                }
            },
            series: [
                {
                    name:'应付中标费用',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
                },
                {
                    name:'已付中标费用',
                    type:'line',
                    stack: '总量',
                    data:[15, 23, 20, 15, 19, 33, 41, 33, 31, 20, 14, 19]
                },
                {
                    name:'未付中标费用',
                    type:'line',
                    stack: '总量',
                    data:[20, 82, 91, 34, 90, 30, 10, 20, 54, 90, 30, 10]
                },
            ]
        };

        option10 = {
            title : {
                text: '需求市场概况',
                // subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['用户发布数量','平台发布数量']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name: '次数',
                    axisLabel: {
                        formatter: '{value} ,00 次'
                    }
                }
            ],
            series : [
                {
                    name:'用户发布数量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'平台发布数量',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };

        option11 = {
            title : {
                text: '活动/商品概况',
                // subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['供应商发布数量','平台发布数量']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name: '次数',
                    axisLabel: {
                        formatter: '{value} ,00 次'
                    }
                }
            ],
            series : [
                {
                    name:'供应商发布数量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'平台发布数量',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };

        option12 = {
            title: {
                text: '文档下载概况'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['总数量','热门下载量','非热门下载量'],
                top:"6%",//与上方的距离 可百分比% 可像素px
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value',
                name: '数量',
                axisLabel: {
                    formatter: '{value} ,00 '
                }
            },
            series: [
                {
                    name:'总数量',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
                },
                {
                    name:'热门下载量',
                    type:'line',
                    stack: '总量',
                    data:[15, 23, 20, 15, 19, 33, 41, 33, 31, 20, 14, 19]
                },
                {
                    name:'非热门下载量',
                    type:'line',
                    stack: '总量',
                    data:[20, 82, 91, 34, 90, 30, 10, 20, 54, 90, 30, 10]
                },
            ]
        };

        option13 = {
            title: {
                text: '新闻浏览概况'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['总数量','热门浏览量','非热门浏览量'],
                top:"6%",//与上方的距离 可百分比% 可像素px
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value',
                name: '数量',
                axisLabel: {
                    formatter: '{value} ,00 '
                }
            },
            series: [
                {
                    name:'总数量',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
                },
                {
                    name:'热门浏览量',
                    type:'line',
                    stack: '总量',
                    data:[15, 23, 20, 15, 19, 33, 41, 33, 31, 20, 14, 19]
                },
                {
                    name:'非热门浏览量',
                    type:'line',
                    stack: '总量',
                    data:[20, 82, 91, 34, 90, 30, 10, 20, 54, 90, 30, 10]
                },
            ]
        };

        option14 = {
            title: {
                text: '客户量统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['用户总数','新增用户量','新增供应商量','不活跃用户量','供应商总数','不活跃供应商量'],
                top:"6%",//与上方的距离 可百分比% 可像素px
                left: 'right',
                orient: 'vertical',
            },
            grid: {
                right: '15%',
                left: '4%',

                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value',
                name: '数量',
                axisLabel: {
                    formatter: '{value} ,00 '
                }
            },
            series: [
                {
                    name:'用户总数',
                    type:'line',
                    stack: '总量',
                    data:[200, 320, 510, 634, 790, 1010, 1210,1301, 1434,1590, 1830, 2110]
                },

                {
                    name:'新增供应商量',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'新增用户量',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
                },
                {
                    name:'供应商总数',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'不活跃供应商量',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
                },
                {
                    name:'不活跃用户量',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
                },

            ]
        };

        option15 = {
            title : {
                text: '会员费总额/保证金总额统计',
                // subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['会员费总额','保证金总额']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name: '金额',
                    axisLabel: {
                        formatter: '{value} ,00 元'
                    }
                }
            ],
            series : [
                {
                    name:'会员费总额',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'保证金总额',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };

        option16 = {
            title : {
                text: '服务费价格区间订单数量概况',
                x:'center'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                top:"6%",//与上方的距离 可百分比% 可像素px
                data: ['0.5万以下','0.5-1万','1-2万','2-3万','3-4万','4-5万','5万以上']
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                right: '15%',
                left: '4%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value',
                name: '数量',
                axisLabel: {
                    formatter: '{value} ,00 '
                }
            },
            series: [
                {
                    name:'0.5万以下',
                    type:'line',
                    stack: '总量',
                    data:[200, 320, 510, 634, 790, 1010, 1210,1301, 1434,1590, 1830, 2110]
                },

                {
                    name:'0.5-1万',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'1-2万',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
                },
                {
                    name:'2-3万',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'3-4万',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
                },
                {
                    name:'4-5万',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
                },
                {
                    name:'5万以上',
                    type:'line',
                    stack: '总量',
                    data:[15, 23, 21, 14, 10, 33, 40, 21, 14, 10, 30, 40]
                },
            ]
        };

        option17= {
            title : {
                text: '服务费分类区间订单数量概况',
                x:'center'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['战略咨询','招聘管理','培训管理','薪酬福利','员工关系','HR信息系统','执业资格']
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                right: '15%',
                left: '4%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value',
                name: '数量',
                axisLabel: {
                    formatter: '{value} ,00 '
                }
            },
            series: [
                {
                    name:'战略咨询',
                    type:'line',
                    stack: '总量',
                    data:[200, 320, 510, 634, 790, 1010, 1210,1301, 1434,1590, 1830, 2110]
                },

                {
                    name:'招聘管理',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'培训管理',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
                },
                {
                    name:'薪酬福利',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'员工关系',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
                },
                {
                    name:'HR信息系统',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
                },
                {
                    name:'执业资格',
                    type:'line',
                    stack: '总量',
                    data:[15, 23, 21, 14, 10, 33, 40, 21, 14, 10, 30, 40]
                },
            ]
        };

        $(function () {
            var myChart = echarts.init(document.getElementById("contain"));

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            var myChart1 = echarts.init(document.getElementById("contain1"));
            myChart1.setOption(option1);

            var myChart2 = echarts.init(document.getElementById("contain2"));
            myChart2.setOption(option2);
            var myChart3 = echarts.init(document.getElementById("contain3"));
            myChart3.setOption(option3);

            var myChart4 = echarts.init(document.getElementById("contain4"));
            myChart4.setOption(option4);
            var myChart5 = echarts.init(document.getElementById("contain5"));
            myChart5.setOption(option5);

            var myChart6 = echarts.init(document.getElementById("contain6"));
            myChart6.setOption(option6);

            var myChart7 = echarts.init(document.getElementById("contain7"));
            myChart7.setOption(option7);

            var myChart8 = echarts.init(document.getElementById("contain8"));
            myChart8.setOption(option8);

            myChart = echarts.init(document.getElementById("contain9"));
            myChart.setOption(option9);

            myChart = echarts.init(document.getElementById("contain10"));
            myChart.setOption(option10);

            myChart = echarts.init(document.getElementById("contain11"));
            myChart.setOption(option11);

            myChart = echarts.init(document.getElementById("contain12"));
            myChart.setOption(option12);

            myChart = echarts.init(document.getElementById("contain13"));
            myChart.setOption(option13);

            myChart = echarts.init(document.getElementById("contain14"));
            myChart.setOption(option14);

            myChart = echarts.init(document.getElementById("contain15"));
            myChart.setOption(option15);

            myChart = echarts.init(document.getElementById("contain16"));
            myChart.setOption(option16);

            myChart = echarts.init(document.getElementById("contain17"));
            myChart.setOption(option17);
        });

    </script>
    <script>
        function countUp(count,element){
            let divBy = 100,
                speed = Math.round(count / divBy),
                $display = $(element),
                runCount = 1,
                intSpeed = 24;
            let int = setInterval(function() {
                if(runCount < divBy){
                    $display.text(speed * runCount);
                    runCount++;
                } else if(parseInt($display.text()) < count) {
                    let currCount = parseInt($display.text()) + 1;
                    $display.text(currCount);
                } else {
                    clearInterval(int);
                }
            }, intSpeed);
        }
        $(function () {
            countUp(3456,'.count1');
            countUp(399,'.count2');
            countUp(1234,'.count3');
        });
        let app = new Vue({
            el: '#app',
            data: function() {
                return {

                }
            },
            methods: {

            }
        });
    </script>
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-home">
            <div class="panel-header">
                <div class="panel-title">
                    整体经营概况 可选择统计开始时间-统计选择时间（按年选择，如2019年度） 区域可以选择全国、重庆、成都
                </div>
            </div>
            <div class="panel-main home-count">
                <div style="width: 100%;height: 400px"><div class="contain6" style="width: 100%;height: 100%" id="contain6"></div></div>
            </div>
            <div class="panel-main home-count">
                <div style="width: 100%;height: 400px"><div class="contain7" style="width: 100%;height: 100%" id="contain7"></div></div>
            </div>
            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain"></div></div>
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain1"></div></div>

            </div>
            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain2"></div></div>

            </div>

            <div class="panel-header">
                <div class="panel-title">
                    整体转化情况
                </div>
            </div>

            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain3"></div></div>
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain4"></div></div>
            </div>

            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain5"></div></div>
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain8"></div></div>
            </div>

            <div class="panel-header">
                <div class="panel-title">
                    栏目项目概况
                </div>
            </div>

            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain9"></div></div>
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain10"></div></div>
            </div>

            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain11"></div></div>
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain12"></div></div>
            </div>

            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain13"></div></div>

            </div>

            <div class="panel-header">
                <div class="panel-title">
                    综合数据展示
                </div>
            </div>
            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain14"></div></div>
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain15"></div></div>
            </div>
            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain16"></div></div>
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain17"></div></div>
            </div>
            <div class="panel-header">
                <div class="panel-title">
                    平台实时概况
                </div>
            </div>

            <div class="panel-main home-realtime">
                <div class="realtime-item new-realtime">
                    <div class="card-icon"><div><i class="fa fa-hand-pointer-o"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">浏览量</div>
                        <div class="card-number">266</div>
                        <div class="card-description">昨日：238</div>
                    </div>
                </div>
                <div class="realtime-item good-realtime">
                    <div class="card-icon"><div><i class="fa fa-volume-control-phone"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">来电量</div>
                        <div class="card-number">66</div>
                        <div class="card-description">昨日：74</div>
                    </div>
                </div>
                <div class="realtime-item user-realtime">
                    <div class="card-icon"><div><i class="fa fa-user"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">新增用户量</div>
                        <div class="card-number">122</div>
                        <div class="card-description">昨日：12</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-industry"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">新增供应商量</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">信息费充值</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>
                <div class="realtime-item good-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">来电信息费消耗</div>
                        <div class="card-number">66</div>
                        <div class="card-description">昨日：74</div>
                    </div>
                </div>

            </div>
            <div class="panel-main home-realtime">
                <div class="realtime-item user-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">投标信息费消耗</div>
                        <div class="card-number">122</div>
                        <div class="card-description">昨日：12</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">信息费余额</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">应付中标费用</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>

                <div class="realtime-item good-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">已付中标费用</div>
                        <div class="card-number">66</div>
                        <div class="card-description">昨日：74</div>
                    </div>
                </div>
                <div class="realtime-item user-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">未付中标费用</div>
                        <div class="card-number">122</div>
                        <div class="card-description">昨日：12</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">活动收益</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">商品收益</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

